

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>课程阶段</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/attend/m/common.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/eleTree.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <link rel="stylesheet" href="/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/layui.js"></script>
    <script src="/lib/layui/layui/js/limstree.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js/"></script>
    <script src="/lib/layui/layui/js/baseCode/base.js?v=2019080918:09" type="text/javascript" charset="utf-8"></script>
    <style>
        .layui-card-header{
            border-bottom: 1px solid #eee;
            /*background: #fff;*/
            /*margin-top: 5px;*/
        }
        .main-row{
            display: flex;
            width: 100%;
            box-sizing: border-box;
            padding: 0 10px;
            font-size: 15px;
            line-height: 16px;
            margin-top: 15px;
        }
        .side-col{
            width: 100%;
            padding-right: 12px;
        }

        .panel {
            position: relative;
            /*margin-bottom: 20px;*/
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 2px 6px 0 rgba(0,0,0,.045);
            box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 2px 6px 0 rgba(0,0,0,.045);
        }
        .panel-heading {
            padding: 12px 48px 12px 20px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }
        .panel-title {
            font-size: 14px;
            font-weight: 700;
            line-height: 20px;
            cursor: pointer;
        }
        .panel-body{
            padding: 20px;
            padding-top: 0;
        }
        .main-col{
            width: 70%;
        }

        .row-module + .row-module {
            margin-top: 5px;
        }

        .row-module {
            max-width: 550px;
            min-width: 400px;
        }
        .table-row {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .col-module{
            min-width: 200px;
        }
        .col-shorts {
            width: 110px;
        }
        .table-form>tbody>tr>td, .table-form>tbody>tr>th, .table-form>tfoot>tr>td, .table-form>thead>tr>th {
            padding: 7px;
            vertical-align: middle;
            border-bottom: none;
        }
        .table td, .table th {
            padding: 8px 10px;
            line-height: 1.42857143;
            vertical-align: top;
            border-bottom: 1px solid #cbd0db;
            -webkit-transition: background .2s cubic-bezier(.175,.885,.32,1);
            -o-transition: background .2s cubic-bezier(.175,.885,.32,1);
            transition: background .2s cubic-bezier(.175,.885,.32,1);
        }
        .text-middle{
            font-size: 14px;
        }
        .text-middle img{
            width: 21px;
            margin-bottom: 4px;
        }
        .col-actions {
            width: 88px;
            padding-left: 5px;
        }
        .iptbox{
            display: flex;
            margin: 10px 0;
        }
        .longs{
            width: 450px;
        }
        .shorts{
            width: 150px;
        }
        .pnul{
            width: 60px;
        }
        .btnls{
            display: flex;
            align-items: center;
            margin-left: 5px;
        }
        .rtfix{
            overflow-y: auto;
        }

        /*滚动条样式*/
        .rtfix::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .rtfix::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        .rtfix::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            background: rgba(0, 0, 0, 0.1);
        }
        .layui-layer-btn .layui-layer-btn0{
            background-color: #009688 !important;
            border-color: #009688 !important;
        }
        .layui-layer-btn .layui-layer-btn1{
            background-color: #FF5722 !important;
            border-color: #FF5722 !important;
            color: #fff;
        }
        #hide{
            display: none;
        }
    </style>
</head>
<body>
<%--<div class="layui-card-header">模块维护::实验室管理系统</div>--%>

<div class="main-row">
    <div class="side-col">
        <div class="panel  rtfix">
            <div class="panel-heading" id="lefttitle">
                <div class="panel-title maintit">课程类别
                    <button id="addlBtn" class="layui-btn layui-btn-xs" style="float: right;margin-top: -1px;">新增</button>
                </div>

            </div>
            <div class="panel-body">
                <%--<div id="test9" class="demo-tree demo-tree-box"></div>--%>
                <div class="eleTree ele1" lay-filter="data1"></div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
//    $('.rtfix').css('max-height',autodivheight()-55)
    var el
        ,aldata
        ,nodefun = new Classmeth()
        ,newstr='<div class="iptbox mnodec" pid="">'+
        '<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="序号" class="layui-input pnul">'+
        '<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="名称" class="layui-input shorts">'+
        '<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="备注" class="layui-input longs">'+
        '<div class="btnls">'+
        '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm limsAdd"><i class="layui-icon"></i></button>'+
        '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm limsDel"><i class="layui-icon"></i></button>'+
        '</div>'+
        '</div>';
    var getChildData;
    layui.use(['table','layer','form','eleTree'], function(){
        var table = layui.table
            ,layer = layui.layer
            ,$ = layui.jquery
            ,eleTree = layui.eleTree

//        初始化渲染
        el = eleTree.render({
            elem: '.ele1',
            highlightCurrent: true,
//            draggable:true,
            showLine:true,
            url:'/trCourseStage/showParent',
            contextmenuList: ['add.async',"edit",'remove'],
            lazy: true,
            load: function(data,callback) {
                $.post('/trCourseStage/showChild?courseStage='+data.courseStage,function (res) {
                    callback(res.data);//点击节点回调
                    if(res.data) nodefun.objLen = res.data.length
                    else nodefun.objLen = 0;
                })
            },
            done:function (data) { //渲染完成回调
                if(data.data.length>0) {
                    nodefun.objLen = data.data.length;
//                    $("#addlBtn").css("display","none");
                }
                else{
                    nodefun.objLen = 0;
//                    $("#addlBtn").css("display","block");
                }
            }
        });
        $("#addlBtn").click(function () {
            layer.open({
                type: 1
                ,skin: 'layui-layer-rim'
                ,area: ['350px', '150px']
                ,title:'请输入课程类别'
                ,btn: ['确定','取消']
                ,maxmin: true
                ,content: '<input type="text" class="layui-input" style="width: 300px;padding: 0 10px;margin: 5px auto;" />'
                ,yes:function(index, layero){
                    layer.close(index);
                    var val = $(".layui-input").val();
                    var obj = {
                        pId:0
                        ,type:0
                        ,label:val
                    }
                        ,newVal='';
                    $.post('/trCourseStage/addParent',obj,function (res) {
                        window.location.reload();
                    })
                }
            })
        })
        // 节点点击事件
       /* eleTree.on("nodeClick(data1)",function(d) {
            var obj = d.data.currentData
            var pid = obj.equipTypePid;
            $.post('/equipmentType/showEquipmentTypeById?equipTypeId='+obj.id,function (res) {
                var obj = res.data
                    ,str;
                //判断pid是否为0 如果是 就让str等于空，否则就渲染数据
                if(pid !== 0&&obj.length>0){
                    $.each(obj,function (i,v) {
                        if(obj[i] != null){
                            str += '<tr><td colspan="4" data-cid='+obj[i].capyId+'>'+obj[i].capyName+'</td></tr>'
                        }
                    })
                    $("#hide").css("display","block");
                }else if(pid !== 0&&obj.length==0){
                    str=""
                    $("#hide").css("display","block");
                }else if(pid == 0){
                    str = "";
                    $("#hide").css("display","none");
                }
                $('tbody').html(str)
            })
            nodefun.pid = obj.equipTypePid;
            nodefun.id = obj.id;

        })*/

        // 添加节点之前事件
        eleTree.on("nodeInsertBefore(data1)",function(d) {
            var obj = {
                // pId:d.data.equipTypePid
                id:d.data.id
                // ,sort:d.data.equipSort
                ,type:0
                ,label:d.newData.label
            }
                ,newVal='';
            // $.post('/equipmentType/addEquipType',obj,function (res) {
                $.post('/trCourseStage/addParent',obj,function (res) {
                var data = res.data;
                $.each(data, function(i,val){
                    el.updateKeySelf(val.courseStage,val);   //更新当前节点
                    if(data[i].label == d.newData.label) el.insertBefore(d.data.id,val);//插入子节点
                });
                d.stop();// 取消自动添加
                    layer.msg(res.msg, {icon: 1});
                    el.reload(d.data)
                })
        })
        // 添加子节点事件
        eleTree.on("nodeAppend(data1)",function(d) {

            var obj = {
                // pId:d.data.equipTypePid
                id:d.data.id
                // ,sort:d.data.equipSort
                ,type:1
                ,label:d.newData.label
                ,isLeaf:d.data.isLeaf
            }
                ,newVal='';
            // $.post('/equipmentType/addEquipType',obj,function (res) {
            $.post('/trCourseStage/addParent',obj,function (res) {
                var data = res.data;
                $.each(data, function(i,val){

                    if(data[i].stageName == d.newData.label) newVal = val
                    el.updateKeySelf(data[i].courseStage,data[i]);
                    window.location.reload();
                });
                // d.stop();// 取消自动添加
                layer.msg(res.msg, {icon: 1});
                // el.reload(d.data)
            })
        })

        // 节点被编辑事件
        eleTree.on("nodeEdit(data1)",function(d) {
            var data = d.data
            data.label = d.value
            // $.post('/equipmentType/editEquipmentType',{json:JSON.stringify(data)},function (res) {
                $.post('/trCourseStage/updatenode',{json:JSON.stringify(data)},function (res) {
                    layer.msg(res.msg, {icon: 1});
            })
            // d.stop();                   // 取消编辑
        })


        // 添加节点之后事件
        eleTree.on("nodeInsertAfter(data1)",function(d) {
            var obj = {
                // pId:d.data.equipTypePid
                id:d.data.id
                // ,sort:d.data.equipSort
                ,type:2
                ,label:d.newData.label
            }
                ,newVal='';
            // $.post('/equipmentType/addEquipType',obj,function (res) {
                $.post('/trCourseStage/addParent',obj,function (res) {
                var data = res.data;
                $.each(data, function(i,val){
                    el.updateKeySelf(val.id,val);   //更新当前节点
                    if(data[i].label == d.newData.label) el.insertAfter(d.data.id,val);//添加节点之后
                });
                d.stop();// 取消自动添加
                    layer.msg(res.msg, {icon: 1});
                    el.reload(d.data)
            })
        })
        var l = document.getElementsByClassName("eleTree-node");
        // 树节点被删除事件
        eleTree.on("nodeRemove(data1)",function(d) {
            var dt = d.data
                ,removele
                ,obj ={
                courseStage:dt.courseStage
                ,pid:dt.stageParent
                ,id:dt.id
                ,isLeaf:dt.isLeaf
                ,sort:dt.stageSort
                }
                ,delobj ={
                courseStage:dt.courseStage
                }
                if(dt.children<=0){
                    obj.isLeaf = "true";
                }
          /*  $.each($('.code'),function (i,v) {  //右侧同步删除
                if($($('.code')[i]).val() == dt.id) removele = $($('.code')[i]).parents('.iptbox');

            })*/
            d.stop(); // 取消删除
            // nodefun.del(obj,delobj,'/equipmentType/deleteEquipmentTypeById',removele,function () {
            nodefun.del(obj,delobj,'/trCourseStage/delete',removele,function (res) {
                    if(l.length==0){
                        $("#addlBtn").css("display","block");
                    }
                layer.msg(res.msg, {icon: 1});
                el.reload(d.data)

            });

        })
    });

    //    ***********************************     右侧列表部分   ************************************



    //    右侧列表删除
    $(document).on('click','.limstreeDel',function () {
        var isLeaf = $(this).attr('isLeaf');
        var id = $(this).attr('cid');
        var ele = $(this).parents('.iptbox');
        nodefun.del(id,isLeaf,'/projstand/deleteStandById',ele)
    })
    //    右侧列表保存/新增/修改
    $('#save').click(function () {
        var iptbox = $('.iptbox')
            ,iptlist = []
            ,pid = $('#sonModule').attr('parent')
        for(var i=0;i<iptbox.length;i++){
            var iptobj = {};
            iptobj.standTypeSort = $($(iptbox)[i]).find('.pnul').val();
            iptobj.label = $($(iptbox)[i]).find('.shorts').val();
            iptobj.memo = $($(iptbox)[i]).find('.longs').val();
            iptobj.id = $($(iptbox)[i]).find('.code').val() ?$($(iptbox)[i]).find('.code').val():'';
            iptlist.push(iptobj)
        }
        $.post('/projstand/addAndEditStandType',{pid:pid,json:JSON.stringify(iptlist)},function (res) {
            layer.msg(res.msg);
            window.location.reload()
        })
    })
    //        更新右侧列表
    function updateList(obj) {
        var str = '';
        if (obj){
            for(var i=0;i<obj.length;i++){
                str+='<div class="iptbox">'+
                    '<input type="text" name="title" lay-verify="title" autocomplete="off" value="'+obj[i].standTypeSort+'" class="layui-input pnul">'+
                    '<input type="text" name="title" lay-verify="title" autocomplete="off" value="'+obj[i].typeName+'" class="layui-input shorts">'+
                    '<input type="text" name="title" lay-verify="title" autocomplete="off" value="'+obj[i].memo+'" class="layui-input longs">'+
                    '<input type="hidden" value="'+obj[i].id+'" class="code">'+
                    '<div class="btnls">'+
                    '<button type="button" cid="'+obj[i].id+'" isLeaf="'+obj[i].isLeaf+'" class="layui-btn layui-btn-primary layui-btn-sm limstreeDel"><i class="layui-icon"></i></button>'+
                    '</div>'+
                    '</div>'+
                    '</div>';
            }
        }else str='';
        return str
    }

    //       加载根树
    $('.maintit').click(function () {
        el.reload();
        $('.coname').html('标准类别');
        $('#sonModule').attr('parent',0);
        nodefun.pid = 0;
    })

    $(document).on('click','.limsAdd',function () {
        $('#sonModule').append(newstr);
    })

    $(document).on('click','.limsDel',function () {
        if($('.mnodec').length>1){
            $(this).parents('.iptbox').remove();
        }
    })
    //获取子页面的数据，进行渲染
    getChildData = function (getData) {
        var getdata = getData;
        // 封装一个函数 获取一个数组
        function getArr(str){
            var arr = [];
            var ar = str.split(",");
            for(var key in ar){
                arr.push(ar[key]);
            }
            // 数组去掉最后一项
            var carr = arr.slice(0,-1);
            return carr;
        }
        // 获取子页面下的某元素的id值 拼接成字符串
        var ss = "";
        for(var i=0;i<getdata.length;i++){
            ss += getdata[i].value + ",";
        }
        //获得一个数组
        var sarr = getArr(ss);
        // 获取子页面下的某元素的id值对应的名字 拼接成字符串
        var nn = "";
        for(var i=0;i<getdata.length;i++){
            nn += getdata[i].title + ",";
        }
        //获得一个数组
        var narr = getArr(nn);
        $.ajax({
            type: "post",
            url: "/equipmentType/addEquipTypeCapyByTypeId",
            dataType: "json",
            data:{
                equuipTypeCapyIds:ss,
                equipTypeId:nodefun.id
            },
            success: function (res) {
                var strr;
                if(sarr.length !== 0){
                    $.each(sarr,function (i,v) {
                        strr += '<tr><td colspan="4" data-cid='+sarr[i]+'>'+narr[i]+'</td></tr>'
                    })
                }else{
                    strr = "";
                }
                $('tbody').html(strr);
            }
        })
    }
</script>

</body>



</html>